<template>
  <div class="music-list">
      <div class="back" @click="back">
        <i class="icon-back"></i>
      </div>
      <h1 class="title" v-html="title"></h1>
      <div class="bg-image" :style='bgStyle' ref="bgImage">
        <div class="play-wrapper" v-show="songs.length>0" ref="playWrapper">
          <div class="play">
            <i class="icon-play"></i>
            <span class="text">随机播放全部</span>
          </div>
        </div>
        <div class="filter"></div>
      </div>
      <div class="bg-layer" ref="bgLayer"></div>
      <div class="mercy-scroll-box" ref="mercyScrollBox">
        <cube-scroll class="mercy-scroll" :scrollEvents="['scroll']" @scroll="scroll">
          <song-list ref="songList" :songs="songs" @select="selectItem"></song-list>
        </cube-scroll>
        <div class="loading-container" v-show="!songs.length">
          <div class="loading-box"><cube-loading class="loading"></cube-loading></div>
          <p class="desc">正在载入...</p>
        </div>
      </div>
      
  </div>
</template>

<script>
import SongList from './SongList'
import {prefixStyle} from '../utils/dom'


const RESERVED_HEIGHT = 40;
const transform = prefixStyle('transform');

export default {
  name: 'MusicList',

  components: {
    SongList
  },

  props: {
    title: {
      type: String,
      default: ''
    },

    bgImage: {
      type: String,
      default: ''
    },

    songs: {
      type: Array,
      default: []
    }
  },

  data() {
    return {
      scrollY: 0
    }
  },

  computed: {
    bgStyle() {
      return `background-image: url(${this.bgImage})`
    }
  },

  methods: {
    scroll(e) {
      this.scrollY = Math.max(e.y, this.maxTranslateY);
      this.$refs.bgLayer.style[transform] = `translate3d(0,${this.scrollY}px,0)`;

      let zIndex = 0;
      let scale = 1;
      let percent = Math.abs(e.y/this.bgImageHeight);

      if(e.y > 0) {
        scale = percent + 1;
        zIndex = 10;
      }

      if(e.y < this.maxTranslateY) {
        zIndex = 10;
        this.$refs.bgImage.style.paddingTop = 0;
        this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`;
        this.$refs.playWrapper.style.display = 'none';
      } else {
        this.$refs.bgImage.style.paddingTop = '70%';
        this.$refs.bgImage.style.height = 0;
        this.$refs.playWrapper.style.display = '';
      }
      this.$refs.bgImage.style.zIndex = zIndex;
      this.$refs.bgImage.style[transform] = `scale(${scale})`;
    },

    back() {
      this.$router.back()
    },

    selectItem(song, index) {
      // console.log(song);
      this.$store.dispatch('selectPlay', {
        list: this.songs,
        index: index
      })
    }
  },

  mounted() {
    this.bgImageHeight = this.$refs.bgImage.clientHeight;
    this.maxTranslateY = -this.bgImageHeight + RESERVED_HEIGHT;
    this.$refs.mercyScrollBox.style.top = `${this.bgImageHeight}px`;

    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.music-list {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #222;

    .back {
      position: absolute;
      top: 0;
      left: 6px;
      z-index: 50;

      .icon-back {
        display: block;
        padding: 10px;
        font-size: 22px;
        color: #ffcd32;
      }
    }

    .title {
      position: absolute;
      top: 0;
      left: 10%;
      z-index: 40;
      width: 80%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      text-align: center;
      line-height: 40px;
      font-size: 18px;
      color: #fff;
    }

    .bg-image {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 70%;
      transform-origin: top;
      background-size: cover;

      .play-wrapper {
        position: absolute;
        bottom: 20px;
        z-index: 50;
        width: 100%;

        .play {
          box-sizing: border-box;
          width: 135px;
          padding: 7px 0;
          margin: 0 auto;
          text-align: center;
          border: 1px solid #ffcd32;
          color: #ffcd32;
          border-radius: 100px;
          font-size: 0;

          .icon-play {
            display: inline-block;
            vertical-align: middle;
            margin-right: 6px;
            font-size: 16px;
          }

          .text {
            display: inline-block;
            vertical-align: middle;
            font-size: 12px;
          }
        }

      }

      .filter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(7,17,27,.4);
      }
    }

    .bg-layer {
      position: relative;
      height: 100%;
      background: #222;
    }

    .mercy-scroll-box {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: #222;

      .mercy-scroll {
        overflow: visible;
      }

      .loading-container {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);

        .loading-box {
          text-align: center;

          .loading {
            display: inline-block;
          }
        }

        .desc {
          width: 100%;
          line-height: 20px;
          font-size: 12px;
          color: hsla(0,0%,100%,.5);
          text-align: center;
          margin-top: 5px;
        }
      }
    }

    
}
</style>
